<template>
  <div>
    <el-menu background-color="#00215e" text-color="#fff" active-text-color="#ffd04b" :default-active="activeIndex"
      router>
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
  </div>
</template>

<script>
import DefaultMenuData from '../utils/menu/DefaultMenuData'
import NavMenu from './NavMenu';
export default {
  components: {
    NavMenu: NavMenu
  },
  data() {
    return {
      activeIndex: 'aa',
      menuData: []
    };
  },
  methods: {
    getMemuData() {
      const menuList = localStorage.getItem('MenuList');
      this.menuData = JSON.parse(menuList).map(item => {
        const menuitem = new FormData();
        menuitem.id = item.Id;
        menuitem.name = item.Url;
        menuitem.icon = item.Icon;
        menuitem.title = item.Name;
        menuitem.children = this.formatterData(item.Children);
        return menuitem;
      })
      this.menuData = DefaultMenuData.concat(this.menuData);
    },
    // 处理从后台菜单数据
    formatterData(arr) {
      var tree = [];
      arr.map(item => {
        if (item.Children === null || item.Children.lengh === 0) {
          const menuitem = new FormData();
          menuitem.id = item.Id;
          menuitem.name = '/' + ((item.Url + '').split('/')[(item.Url + '').split('/').length - 1]);
          menuitem.icon = item.Icon;
          menuitem.title = item.Name;
          const { children, ...newItem } = menuitem;// 移除children 属性
          tree.push(newItem);
        } else {
          const menuitem = new FormData();
          menuitem.id = item.Id;
          menuitem.name = '/' + ((item.Url + '').split('/')[(item.Url + '').split('/').length - 1]);
          menuitem.icon = item.Icon;
          menuitem.title = item.Name;
          menuitem.children = this.formatterData(item.Children);
          tree.push(menuitem);
        }
      });
      return tree;
    }
  },
  mounted() {
    this.getMemuData();
  }
}
</script>

